<template>
	<view class="videoComponents">
		<video class="video" autoplay loop :src="videoSrc" :controls="false" :show-play-btn="false" :show-center-play-btn="false" object-fit="cover">
			<view class="navBar" :style="{ height: `${height + statusBarHeight + 5}px`, paddingTop: statusBarHeight + 'px' }">
				<image @tap="back" src="/static/previewVideo/whiteBack.png" mode=""></image>
			</view>
			<view class="operate">
				<view class="tag_list">
					<view class="addTag" @tap="openTagPop">
						<image style="width: 32rpx; height: 32rpx;" src="/packageHome/static/add-fill.png" mode=""></image>
						<text>添加病症标签</text>
					</view>
					<view class="tag" v-for="(item, index) in showTags" :key="index">
						<image style="width: 32rpx; height: 32rpx;" src="/packageHome/static/priceTag.png" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="btn">
					<view class="reShoot" @tap="reShoot">
						重新拍
					</view>
					<view class="startInterpretation" @tap="startInterpretation()">
						拍摄完成
					</view>
				</view>
			</view>
		</video>
		<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
		<uni-popup :mask-click="false" ref="popup" type="bottom" background-color="#fff" style="z-index: 999999;" @change="change">
			<view class="pop_box">
				<view class="top">
					<view class="top_left" @click="clickClose">
						关闭
					</view>
					<view class="top_mid">
						添加病症标签
					</view>
					<view class="top_right" @click="handleAdd">
						保存
					</view>
				</view>
				<view class="diy">
					<view v-for="(i, ind) in diyList" :key='ind' class="diy_tag active">
						{{i.name}}
                        <icon class="btn_del" type="clear" size="20" color="#999999" @click="onDelTag(ind)" />
					</view>
					<view class="diy_btn" @click="openInputPop">
						+ 自定义
					</view>
				</view>
				<view v-for="(item,index) in tagList" :key="index" class="tag_w">
					<view class="tag_title">
						{{item.name}}
					</view>
					<view class="tag_list">
						<view v-for="(i, ind) in item?.list" :key='ind' class="tag_item" :class="{active: pickIds.includes(i.id)}" @click="pickTag(i)">
							{{i.name}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入标签, 不超过7个字" value="" placeholder="请输入内容" @confirm="dialogInputConfirm" @close="diglogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import config from '@/hooks/useConfig.js'
	export default {
		data() {
			const {
				prefix_image,
				height,
				statusBarHeight
			} = config()
			return {
				imgSrc: '',
				videoSrc: '',
				height,
				statusBarHeight,
				popShow: false,
				showTags: [],
				tagList: [],
				diyList: [],
				pickList: [],
				pickIds: [],
				medicalDetail: {}
			}
		},
		onLoad(option) {
			console.log('视频预览option', option)
			this.videoSrc = option.videoSrc
			this.imgSrc = option.imgSrc
			if (option.medicalDetail) {
				this.medicalDetail = JSON.parse(option.medicalDetail)
			}
		},
		methods: {
			startInterpretation() {
                if (this.showTags.length === 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '请添加病症标签',
                        duration: 2000
                    })
                    return
                }
				let video_tags_ids = this.pickList.map(item => item.id)
				let diyIds = this.diyList.map(item => item.id)
				let tagIds = [...video_tags_ids, ...diyIds]
				this.$request.post('/v1/api/video/add', {
					pets_id: this.medicalDetail.pets_id, //宠物ID； type=1时，必填
					cases_id: this.medicalDetail.id, // 病例ID；type=2时，必填
					store_id: this.medicalDetail.store_id,
					video_category_id: '', //视频分类id
					video_tags_ids: tagIds.join(), //视频标签ID
					title: '', //标题
					content: '', //内容
					image: this.imgSrc, //图片
					videofile: this.videoSrc, //视频
					description: '', //描述
					type: 3 //类型:1=打卡视频,2=活动视频,3=病历视频
				}).then(res => {
					if (res.code == 1) {
						let pages = getCurrentPages()
						if (pages.length >= 2) {
							let curPage = pages[pages.length - 1]; // 当前页面
							let prePage = pages[pages.length - 3]; // 上上一页面
							prePage.setData({
								videoSrc: this.videoSrc,
								imgSrc: this.imgSrc,
							})
							
							uni.$emit("back", {
								videoSrc: this.videoSrc,
								imgSrc: this.imgSrc,
							});
							
							uni.navigateBack({
								delta: 2
							})
						}
					}
				})
			},
			back() {
				uni.$emit("back", {
					data: true
				});
				uni.navigateBack()
			},
			reShoot() {
				uni.$emit("back", {
					data: true
				});
				uni.navigateBack()
			},
			// 数组分类
			groupArr(list, field) {
				var fieldList = [],
					att = [];
				list.map((e) => {
					fieldList.push(e[field])
				})
				//数组去重
				fieldList = fieldList.filter((e, i, self) => {
					return self.indexOf(e) == i
				})
				for (var j = 0; j < fieldList.length; j++) {
					//过滤出匹配到的数据
					var arr = list.filter((e) => {
						return e[field] == fieldList[j];
					})
					att.push(arr)
				}
				return att;
			},
			// 添加病症标签
			openTagPop() {
				this.$request.post('/v1/api/video/tags', {}).then(res => {
					if (res.code == 1) {
						// this.tagList = this.groupArr(res.data, 'pid')
						this.tagList = res.data
						console.log(this.tagList)
						this.$refs.popup.open('bottom')
					}
				})
			},
			change(e) {
				this.popShow = e.show
			},
			clickClose() {
				this.showTags = [...this.pickList, ...this.diyList]
				this.$refs.popup.close()
			},
			// 选择标签
			pickTag(item) {
				const tagIndex = this.pickList.findIndex(value => value.id == item.id)
				if (tagIndex == -1) {
					this.pickList.push(item)
				} else {
					this.pickList.splice(tagIndex, 1)
				}
				this.pickIds = this.pickList.map(i => i.id)
			},
			// 添加
			handleAdd() {
				this.showTags = [...this.pickList, ...this.diyList]
				this.$refs.popup.close()
			},
			// 自定义标签
			openInputPop() {
				this.$refs.inputDialog.open()
			},
            onDelTag(index) {
                this.diyList.splice(index, 1)
            },
			// 自定义标签弹出层confirm事件
			dialogInputConfirm(e) {
                if (e.length === 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入内容',
                        duration: 2000
                    })
                    return
                }
				this.$request.post('/v1/api/video/setTags', {
					pid: '1',
					name: e
				}).then(res => {
					if (res.code == 1) {
						this.diyList.push(res.data)
					}
				})
			},
			// 自定义标签弹出层close事件
			diglogClose() {
				console.log('自定义标签弹出层close事件')
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.videoComponents {
		width 100vw;
		height: 100vh;

		video {
			width: 100%;
			height: 100%;
			position relative;

			.navBar {
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				width: 100vw;
				font-size: 32rpx;
				color: #fff;
				z-index: 100;
				text-align: left;
				display: flex;
				background: rgba(17, 17, 17, .4);
				// filter: blur(1rpx)
				overflow: hidden;
				z-index: 10;
				display: flex;

				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-left: 28rpx;
					z-index: 999;
					// filter: blur(0)

				}
			}

			.operate {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 25vh;
				width: 100vw;
				box-sizing: border-box;
				padding: 32rpx 32rpx 64rpx 32rpx;
				font-size: 32rpx;
				line-height: 100rpx;
				text-align: center;
				background: rgba(17, 17, 17, .9);
				z-index: 10;
				// filter: blur(1rpx)
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tag_list {
					display: flex;
					flex-wrap: wrap;

					.addTag {
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						// width: 212rpx;
						height: 54rpx;
						padding: 10rpx;
						border-radius: 4rpx;
						border: 2rpx solid #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						// line-height: 38rpx;
					}

					.tag {
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						// width: 212rpx;
						height: 54rpx;
						padding: 10rpx;
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						// line-height: 38rpx;
						background: #4D4D4D;
					}
				}

				.btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.reShoot {
					width: 276rpx;
					height: 100rpx;
					border-radius: 50rpx;
					border: 4rpx solid #FFFFFF;
					color: #fff;
					z-index: 999;
					// filter: blur(0)

				}

				.startInterpretation {
					width: 398rpx;
					height: 100rpx;
					background: #FFD300;
					border-radius: 50rpx;
					color: #111111;
					z-index: 999;
					// filter: blur(0)
				}
			}
		}

		.popup_wrap {
			z-index: 999999;

			.course_box {
				padding: 0 32rpx;
				width: 100%;
				height: 626rpx;
				border-radius: 40rpx 40rpx 0rpx 0rpx;

				// background-color: pink;
				.title_box {
					width: 100%;
					height: 96rpx;

					.cancel_btn {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #969799;
					}

					.title_center {
						font-size: 32rpx;
						line-height: 44rpx;
						color: #323233;
					}

					.confirm_btn {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #5797EC;
					}
				}
			}
		}

		.pop_box {
			max-height: 70vh;
			overflow: scroll;
			padding: 68rpx 32rpx 32rpx 32rpx;
			border-radius: 10rpx 10rpx 0 0;

			.top {
				margin-bottom: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top_left,
				.top_right {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;
				}

				.top_left {
					color: #666666;
				}

				.top_right {
					color: #333333;
				}

				.top_mid {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 32px;
				}
			}

			.diy {
				margin-bottom: 64rpx;
				display: flex;
				flex-wrap: wrap;

				.diy_tag {
                    position: relative;
					margin: 0 24rpx 24rpx 0;
					padding: 24rpx 36rpx;
					background: #F1F1F1;
					border-radius: 38rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
                    .btn_del {
                        position: absolute;
                        top: -10rpx;
                        right: -10rpx;
                    }
				}
				.active {
					background: #FFD300;
				}

				.diy_btn {
					margin: 0 24rpx 24rpx 0;
					// width: 184px;
					// height: 76px;
					padding: 24rpx 36rpx;
					border-radius: 38rpx;
					border: 2rpx solid #333333;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
			}

			.tag_w {
				margin-bottom: 40rpx;

				.tag_title {
					margin-bottom: 32rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
					line-height: 36rpx;
				}

				.tag_list {
					display: flex;
					flex-wrap: wrap;

					.tag_item {
						margin: 0 24rpx 24rpx 0;
						padding: 24rpx 36rpx;
						background: #F1F1F1;
						border-radius: 38rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.active {
						background: #FFD300;
					}
				}
			}
		}

	}
</style>
